import { ColumnContainer } from "./BillboardColumn";
import { Input, Spin } from "antd";
import { useAddBillboard } from "../../hooks/useBillboards";
import { useBillboardQueryKey, useProjectIdInUrl } from "./utils";
import { useState } from "react";

export const CreateBillboard = () => {
  const queryKey = useBillboardQueryKey();
  const { mutateAsync: addBillboard, isLoading } = useAddBillboard(queryKey);
  const projectId = useProjectIdInUrl();
  const [name, setName] = useState("");
  const submit = async () => {
    await addBillboard({ name, projectId });
    setName("");
  };
  return (
    <ColumnContainer>
      <Spin spinning={isLoading}>
        <Input
          placeholder="新建看板名称"
          size="large"
          onPressEnter={submit}
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </Spin>
    </ColumnContainer>
  );
};
